<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery UI tabs integration demo</title>
<link rel="stylesheet" type="text/css" media="screen" href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script src="../../lib/jquery.js" type="text/javascript">
</script>

<script src=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"
 type="text/javascript">
</script>

<script src="../../jquery.validate.js" type="text/javascript">
</script>

<script id="demo" type="text/javascript">
$(document).ready(function() {
    var tabs = $("#tabs").tabs();
    var validator = $("#signupform").validate({
        groups: {
            birthdate: "birthdateDay birthdateMonth birthdateYear"
        },
        errorPlacement: function(label, element) {
            if (/^birthdate/.test(element[0].name)) {
                label.insertAfter("#birthdateYear");
            } else {
                label.insertAfter(element);
            }
        }
    });
    
    // validate the other two selects when one changes to update the whole group
    var birthdaySelects = $("#birthdateGroup select").click(function() {
        birthdaySelects.not(this).valid();
    })
    
    // overwrite focusInvalid to activate tab with invalid elements
    validator.focusInvalid = function() {
        if( this.settings.focusInvalid ) {
            try {
                var focused = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []).filter(":visible");
                tabs.tabs("select", tabs.find(">div").index(focused.parent().parent()));
                focused.focus();
            } catch(e) {
                // ignore IE throwing errors when focusing hidden elements
            }
        }
    };
});
</script>

<style type="text/css">
    body { font-size: 65.2% }
    label { display: inline-block; width: 8em; }
    label.error { color: red; margin-left: 0.5em; width: 20em; }
</style>
</head>
<body>
<form id="signupform">
<div id="tabs">
<ul>
<li><a href="index.html#logindata">Login data</a></li>

<li><a href="index.html#personaldata">Personal data</a></li>

<li><a href="index.html#subscriptions">Subscriptions</a></li>
</ul>

<div id="logindata">
<p><label for="username">Username</label> <input id="username"
name="username" class="required" minlength="3" maxlength="20" type=
"text"></p>

<p><label for="email">Email address</label> <input id="email" name=
"email" class="required email" type="text"></p>

<p><label for="password">Password</label> <input name="password"
type="password" class="required" id="password" minlength="4"
maxlength="50"></p>

<p><label for="confirmpassword">Confirm Password</label> <input
name="confirmpassword" type="password" class="required" equalto=
"#password" id="confirmpassword"></p>
</div>

<div id="personaldata">
<p><label for="street">Street</label> <input id="street" name=
"street" class="required" minlength="3" maxlength="50" type=
"text"></p>

<p><label for="city">City</label> <input id="city" name="city"
class="required" minlength="3" maxlength="50" type="text"></p>

<p id="birthdateGroup"><label for="birthdateDay">Birthdate</label>
<select id="birthdateDay" name="birthdateDay" class="required">
<option value="">Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>...</option>
</select> <select id="birthdateMonth" name="birthdateMonth" class=
"required">
<option value="">Month</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select> <select id="birthdateYear" name="birthdateYear" class=
"required">
<option value="">Year</option>
<option>1950</option>
<option>1951</option>
<option>1952</option>
<option>1953</option>
<option>1954</option>
<option>1955</option>
<option>...</option>
</select></p>
</div>

<div id="subscriptions">
<p><label for="weekly">Weekly Newsletter</label> <input id="weekly"
name="weekly" type="checkbox"></p>

<p><label for="updates">Product Updates</label> <input id="updates"
name="updates" type="checkbox"></p>

<p><label for="terms">Terms and conditions</label> <input id=
"terms" name="terms" class="required" type="checkbox"></p>
</div>
</div>

<input type="submit"></form>

<script src="http://www.google-analytics.com/urchin.js" type=
"text/javascript">
</script>

<script type="text/javascript">
_uacct = "UA-2623402-1";
urchinTracker();
</script>
</body>
</html>

